<template>
  <div class="padding-24">
    <a-card
      :bordered="false"
      style="height: 100%"
      :bodyStyle="{
        paddingTop: '14px',
        paddingBottom: 0,
      }"
    >
      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane :key="item.key" :tab="item.label" v-for="item in compList" />
      </a-tabs>
      <component :is="currentComponent" />
    </a-card>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { Operate, TenantSource, Examine, PropertyCheckIn, TenantCheckIn } from './index';
  export default defineComponent({
    name: 'DocumentTableDemo',
    components: {
      Operate,
      PropertyCheckIn,
      Examine,
      TenantCheckIn,
      TenantSource,
    },
    setup() {
      //当前选中key
      const activeKey = ref('Operate');
      //组件集合
      const compList = ref([
        { key: 'Operate', label: '房源经营统计' },
        { key: 'PropertyCheckIn', label: '房源入住统计' },
        { key: 'Examine', label: '房源审核统计' },
        // { key: 'TenantSource', label: '住客来源统计' },
        { key: 'TenantCheckIn', label: '住客入住统计' },
      ]);
      //当前选中组件
      const currentComponent = computed(() => {
        return activeKey.value;
      });

      //使用component动态切换tab
      function tabChange(key) {
        activeKey.value = key;
      }
      return {
        activeKey,
        currentComponent,
        tabChange,
        compList,
      };
    },
  });
</script>
